<template>
	<view id="search">
		<u-search focus=true clearabled=true @change="changeSearch" margin="30rpx" font-size="28" placeholder="请输入书名..." v-model="search.keyword"></u-search>
	
		<view id="read_page">
			<view class="read_list" v-for="(item, index) in bookList" :key="index" @click="navigateToChapter(item.book_id)">
				<view class="img">
					<image :src="item.book_cover"></image>
					<!-- <image src="../../static/logo.png"></image> -->
				</view>
				
				<view class="content">
					<view class="title">
						<text class="name">{{item.book_name}} <text style="margin-left:20rpx;color: #999;">{{item.score}}分</text></text>
					</view>
					<view class="desc">
						{{item.book_brief}}
					</view>
					
					<view class="list_bottom">
						<text class="author">作者：{{item.book_author}}</text>
						<text style="color: #999;">{{item.mood}}字</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<view v-show="noData" style="text-align: center;">
			<u-empty text="没有找到书籍..." mode="search"></u-empty>
			<!-- <image src="../../static/noData.png" style="height:100rpx;width: 100%;"></image> -->
			<!-- <u-icon size="200" name="meiyoushuju" color="#888888" custom-prefix="custom-icon"></u-icon> -->
			<!-- <view>没有找到书籍...</view> -->
		</view>
	</view>
</template>

<script>
	import { search } from '../../util/request/book.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				search: {
					keyword: ''
				},
				
				bookList: [],
				noData: false,
			}
		},
		
		methods:{
			/**
			 * 搜索框变化
			 */
			changeSearch() {
				let that = this;
				that.noData = false;
				search({ book_name: that.search.keyword}).then(res=>{
					that.bookList = res.msg;
					if(res.status!==200){
						that.bookList = [];
						that.noData = true;
					}
				})
			},
			
			/**
			 * 到书本详情
			 */
			navigateToChapter(id) {
				// console.log(id)
				uni.navigateTo({
					url: "/novel/chapter/index?book_id="+id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	#search{
		padding:0 30rpx;
		
		#read_page{
			.read_list{
				display: flex;
				flex-direction: row;
				max-height: 165rpx;
				border-bottom: 1rpx solid #dde;
				padding:16rpx;
				
				
				.img{
					
					image{
						height: 100%;
						width: 100rpx;
					}
				}
			}
			
			.content{
				margin-left:20rpx;
				font-size: 22rpx;
				.title{
					display: flex;
					justify-content: space-between;
					height:48rpx;
					border-bottom: 1rpx dotted #dde;
					
					.name{
						font-weight: bold;
						color: #6f78a7;
					}
					.author{
						color: #999;
					}
				}
				
				.desc{
					font-size: 22rpx;
					display:-webkit-box;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;
					height: 63rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					color:#666;
				}
				
				
				.list_bottom{
					
					display: flex;
					justify-content: space-between;
					color:#999;
					font-size: 20rpx;
				}
			}
		}
	}
</style>
